<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="内容详情"></uni-navbar></view>

		<view class="detail-info" v-show="massesInfo.id">
			<view class="form-box form-box-show">
				<u-form>
					<u-form-item class="form-item" label="提交人">
						<!-- block -->
						<view class="input-text">{{ massesInfo.submitUserName }}</view>
					</u-form-item>

					<u-form-item class="form-item" label="手机号码">
						<!-- block -->
						<view class="input-text">{{ massesInfo.phone }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="常委姓名">
						<!-- block -->
						<view class="input-text">{{ massesInfo.cwName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="常委职务">
						<!-- block -->
						<view class="input-text">{{ massesInfo.cwPosition }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="联系形式">
						<!-- block -->
						<view class="input-text">{{ massesInfo.contactTypeName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="联系代表">
						<!-- block -->
						<view class="input-text">{{ massesInfo.contactUser }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="活动主题">
						<!-- block -->
						<view class="input-text">{{ massesInfo.title }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="活动内容" label-position="top">
						<!-- block -->
						<view class="text-l" v-html="massesInfo.content"></view>
					</u-form-item>
					<u-form-item class="form-item" label="具体问题" label-position="top">
						<!-- block -->
						<view class="text-l" v-html="massesInfo.questionContent"></view>
					</u-form-item>
				</u-form>
			</view>
		</view>

		<!-- <view class="uploader-add" @click="onTts">
			<image v-if="!play" src="/static/img/icon_76.png" mode="widthFix"></image>
			<image src="/static/img/icon_77.gif" v-else mode="widthFix"></image>
		</view> -->

		<view class="file-list" v-if="fileList1.length > 0">
			<view>附件:</view>
			<view class="file-item" v-for="(item, index) in fileList1" :key="index" @click="$showLine(item)">
				<view class="file-name clamp">{{ item.name }}</view>
				<view class="right-type">预览</view>
			</view>
		</view>

		<block v-if="massesInfo.nodeStatus == 'wait' && $sysBtns('shuangl_cl2')">
			<view class="com-h2"><text class="h2-title">问题处理</text></view>
			<view class="form-box">
				<u-form :model="form">
					<u-form-item class="form-item" required label="处理方式" label-width="150" prop="handle">
						<u-radio-group v-model="handle" @change="handleGroupChange" :key="handle">
							<u-radio v-for="(item, index) in handleList" :key="index" :name="item.name">{{ item.label }}</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item class="form-item" label="处理备注" label-position="top">
						<!-- block -->
						<u-input input-align="left" v-model="form.handleInfo" type="textarea" placeholder="请输入处理备注" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>
					<u-form-item class="form-item" label="问题分类">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择问题分类" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" label="类型明细">
						<u-input v-model="secType" type="select" :select-open="secTypeShow" placeholder="请选择类型明细" @click="secTypeShow = true" />
						<u-select :list="secTypeList" v-model="secTypeShow" @confirm="secTypeConfirm"></u-select>
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm">提交</u-button></view>
		</block>

		<block v-if="massesInfo.nodeStatus >= 1 || massesInfo.nodeStatus == 'end'">
			<view class="com-h2"><text class="h2-title">问题处理</text></view>
			<view class="form-box form-box-show">
				<u-form>
					<u-form-item class="form-item" label="处理">
						<view>{{ massesInfo.nodeStatusName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="处理备注" label-position="top">
						<!-- block -->
						<view class="text-l" v-html="massesInfo.handleInfo"></view>
					</u-form-item>
					<u-form-item class="form-item" label="处理人">
						<view>{{ massesInfo.handleUser }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="处理时间">
						<view>{{ massesInfo.handleTime }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="问题分类" v-if="massesInfo.typeName">
						<view>{{ massesInfo.typeName }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="类型明细" v-if="massesInfo.secTypeName">
						<view>{{ massesInfo.secTypeName }}</view>
					</u-form-item>
				</u-form>
			</view>
		</block>

		<block v-if="['1', '2', '3', '4', '5'].indexOf(massesInfo.nodeStatus) > -1 && $sysBtns('shuangl_bj2')">
			<view class="com-h2"><text class="h2-title">问题办结</text></view>
			<view class="form-box">
				<u-form :model="form1">
					<u-form-item class="form-item" label="问题分类">
						<u-input v-model="type" type="select" :select-open="typeShow" placeholder="请选择问题分类" @click="typeShow = true" />
						<u-select :list="typeList" v-model="typeShow" @confirm="typeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" label="类型明细">
						<u-input v-model="secType" type="select" :select-open="secTypeShow" placeholder="请选择类型明细" @click="secTypeShow = true" />
						<u-select :list="secTypeList" v-model="secTypeShow" @confirm="secTypeConfirm"></u-select>
					</u-form-item>
					<u-form-item class="form-item" required label="办理结果" label-position="top">
						<!-- block -->
						<u-input input-align="left" v-model="form1.finishInfo" type="textarea" placeholder="请输入办理结果" :clearable="false" :height="160" :maxlength="-1" />
					</u-form-item>
					<u-form-item class="form-item" label=" " label-position="top">
						<!-- block -->
						<uni-file-upload :type="['all', 'image', 'audio']" :limit="10"></uni-file-upload>
					</u-form-item>
				</u-form>
			</view>

			<view class="fiexd-btm"><u-button class="form-btn" type="error" @click="confirm1">提交</u-button></view>
		</block>

		<block v-if="massesInfo.nodeStatus == 'end'">
			<view class="com-h2"><text class="h2-title">问题办结</text></view>
			<view class="form-box form-box-show">
				<u-form>
					<u-form-item class="form-item" label="办结结果" label-position="top">
						<!-- block -->
						<view class="text-l" v-html="massesInfo.finishInfo"></view>
					</u-form-item>
					<u-form-item class="form-item" label="办结人">
						<view>{{ massesInfo.finishUser }}</view>
					</u-form-item>
					<u-form-item class="form-item" label="办结时间">
						<view>{{ massesInfo.finishTime }}</view>
					</u-form-item>
				</u-form>
				<view class="file-list" v-if="fileList2.length > 0">
					<view>附件:</view>
					<view class="file-item" v-for="(item, index) in fileList2" :key="index" @click="$showLine(item)">
						<view class="file-name clamp">{{ item.name }}</view>
						<view class="right-type">预览</view>
					</view>
				</view>
			</view>
		</block>

		<view v-if="false"></view>
	</view>
</template>

<script>
import uniFileUpload from '@/components/uni-all-uploader.vue';
import uniParse from '@/components/uni-parse/parse.vue';
import selectTree from '@/components/uni-select-tree.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniFileUpload,
		uniParse,
		selectTree
	},
	data() {
		return {
			statusMap: {
				0: '所有',
				1: '待审核',
				2: '办理中',
				3: '已答复',
				4: '已办结',
				5: '不予受理'
			},

			handle: '',
			handleShow: false,
			handleList: [],

			type: '',
			typeShow: false,
			typeList: [],

			secType: '',
			secTypeShow: false,
			secTypeList: [],

			id: '',
			userId: '',
			status: '1',
			massesInfo: {},
			fileList1: [],
			fileList2: [],
			fileList3: [],
			form: {
				handleInfo: '',
				handleTime: '',
				handleResult: '',
				type: '',
				secType: '',
				yianId: '',
				jianyiId: ''
			},
			form1: {
				type: '',
				secType: '',
				finishInfo: '',
				finishTime: ''
			},
			rules: {
				type: [
					{
						required: true,
						message: '请选择审核类型',
						trigger: 'change'
					}
				],
				pass: [
					{
						required: true,
						message: '请选择办理意见',
						trigger: 'change'
					}
				],
				opinion: [
					{
						required: true,
						message: '请输入处理结果',
						trigger: 'change'
					}
				]
			},
			key: -1,
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option.status) {
			this.status = option.status;
		}
		this.loadDict('question_type', 'typeList');
		this.loadDictType('cw_dict_type', 'handleList');

		this.loadData();
	},
	onReady() {
		// this.$refs.uForm.setRules(this.rules);
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;
				this.userName = this.userInfo.sysUser.userName;
				this.roleCodes = this.userInfo.roleCodes.join(',');

				let time = this.$writeCurrentDate();
				this.form.handleTime = time.year + '-' + time.month + '-' + time.date;
				this.form1.finishTime = time.year + '-' + time.month + '-' + time.date;
			} else {
				this.$logout();
			}
		},
		loadDictType(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type,
					remark: 'type'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						name: item.dictValue,
						value: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		loadDict(type, list, value) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						name: item.dictValue,
						value: item.dictValue,
						label: item.dictName
					});
					if (value && value == item.dictValue) {
						this.secType = item.dictName;
					}
				});
			});
		},
		loadData() {
			this.$request('/question/cw/query/' + this.id, {
				id: this.id,
				userId: this.userId
			}).then((res) => {
				if (!res.data) {
					this.$msg('暂无数据');
					return false;
				}
				this.fileList1 = res.data.fileList || [];
				this.fileList2 = res.data.fileList2 || [];
				this.massesInfo = res.data.cw;

				if (this.massesInfo.type) {
					this.type = this.massesInfo.typeName;
					this.form.type = this.massesInfo.type;
					this.form1.type = this.massesInfo.type;
					this.loadDict('question_type_' + this.massesInfo.type, 'secTypeList');
				}
				if (this.massesInfo.secType) {
					this.secType = this.massesInfo.secTypeName;
					this.form.secType = this.massesInfo.secType;
					this.form1.secType = this.massesInfo.secType;
				}
			});
		},
		typeConfirm(e) {
			this.type = e[0].label;
			this.form.type = e[0].value;
			this.form1.type = e[0].value;
			this.loadDict('question_type_' + e[0].value, 'secTypeList');
			this.secType = '';
			this.form.secType = '';
			this.form1.secType = '';
		},
		secTypeConfirm(e) {
			this.secType = e[0].label;
			this.form.secType = e[0].value;
			this.form1.secType = e[0].value;
		},
		handleConfirm(e) {
			this.handle = e[0].label;
			this.form.handleResult = e[0].value;
		},
		handleGroupChange(e) {
			this.handle = e;
			this.form.handleResult = e;
			console.log(e);
			if (e == '2') {
				uni.navigateTo({
					url: '/pagesB/proposal/add?id=' + this.id + '&type=cw'
				});
			}
			if (e == '3') {
				uni.navigateTo({
					url: '/pagesB/propose/add?id=' + this.id + '&type=cw'
				});
			}
		},
		proposalChange(e) {
			this.form.jianyiId = e;
		},
		proposeChange(e) {
			this.form.yianId = e;
		},
		confirm() {
			let data = {};
			data = {
				userId: this.userId,
				role: this.roleCodes,
				cw: {
					id: this.massesInfo.id,
					handleUser: this.userName,
					...this.form
				}
			};

			if (!this.form.handleResult) {
				this.$msg('请选择处理方式');
				return false;
			}

			if (this.form.handleResult == '2' && !this.form.jianyiId) {
				this.$msg('请提交建议');
				return false;
			}

			if (this.form.handleResult == '3' && !this.form.yianId) {
				this.$msg('请提交议案');
				return false;
			}

			let url = '/question/cw/handle';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				this.navigateBack();
			});
		},
		confirm1() {
			let data = {};
			data = {
				userId: this.userId,
				role: this.roleCodes,
				fileList2: this.fileList,
				cw: {
					id: this.massesInfo.id,
					finishUser: this.userName,
					...this.form1
				}
			};

			if (!this.form1.finishInfo) {
				this.$msg('请输入办理结果');
				return false;
			}

			let url = '/question/cw/finish';
			this.$request(url, data, {
				load: true
			}).then((res) => {
				this.$msg(res.msg);
				this.back();
			});
		},
		back(e) {
			this.navigateBack();
		},
		navigateBack(e) {
			setTimeout(() => {
				let pre = this.$prePage();
				if (pre && pre.loadData) {
					pre.loadData('refresh');
				}
				uni.navigateBack();
			}, 500);
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e.phone
			});
		},
		onTts() {
			let text = this.massesInfo.questionTitle || '';
			text += '，时间：' + this.massesInfo.createTimeStr;
			text += '，联系电话：' + this.massesInfo.phone;
			text += '，问题编号：' + this.massesInfo.questionCode;
			text += '，发生地点：' + this.massesInfo.questionPlace;
			text += '，' + this.massesInfo.content;
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.detail-info {
	padding: 0;

	.overflow {
		padding: 20rpx 30rpx 0;
	}
}

.site-box {
	padding: 30rpx 30rpx 0;
	background-color: #f5f7fa;
}

.sched-box {
	padding: 10rpx 50rpx;
}

.filter-box {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.form-box {
	.form-item {
		@include mp-flex;

		.input-text {
			padding: 11rpx 0;
			line-height: 48rpx;
			text-align: right;
		}

		.text-l {
			width: 100%;
			white-space: pre-line;
			text-align: left;
		}
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
